<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>预加载</title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			ul {
				width: 250px;
				float: left;
				margin: 0 5px;
			}

			ul > li {
				margin-bottom: 10px;
				width: 250px;
			}

			#flow {
				width: 1100px;
				margin: 20px auto;
			}

			#flow:after {
				content: '';
				display: block;
				clear: both;
			}
		</style>
		<script type="text/javascript">
			/*
			 *  随机图片接口：https://unsplash.it/300/800/?random
			 *  随机图片接口：https://picsum.photos/200
			 *  参数：300：表示图片的宽度
			 *  参数：800：表示图片的高度
			 */
		</script>
	</head>

	<body>
		<!-- 瀑布流容器 -->
		<div id="flow">
			<ul id="list1"></ul>
			<ul id="list2"></ul>
			<ul id="list3"></ul>
			<ul id="list4"></ul>
		</div>
	</body>

	<script type="text/javascript">
		// 页面加载完毕后，触发加载图片事件
		window.onload = function () {
			// 先定一个小目标：创建20个图片
			createNimg(20);
		};
		// 页面滚动高度大于最短一列图片高度，继续加载新图片
		window.onscroll = function () {
			// 获取所有的ul
			var ulArr = document.getElementsByTagName('ul');
			// 拿到最短一列下标
			var minIndex = getMinHeight(ulArr);
			// 获取当前页面滚动高度
			var h = clientH() + scrollY();
			// 页面高度大于最短一列高度，继续添加新图片
			if (ulArr[minIndex].offsetHeight < h) {
				createNimg(20);
			}
		};
		// 循环创建N个图片
		function createNimg(n) {
			for (var i = 0; i < n; i++) {
				appendImg();
			}
		}

		// 向最短的ul中拼图片
		function appendImg() {
			// 获取所有的ul
			var ulArr = document.getElementsByTagName('ul');
			// 拿到最短的ul下标
			var minIndex = getMinHeight(ulArr);
			// 创建Li
			var li = document.createElement('li');
			// 获取图片
			var imgTag = createImg();
			// 图片进li
			li.appendChild(imgTag);
			// li进ul
			ulArr[minIndex].appendChild(li);
		}

		// 获取最短的一列ul下标
		function getMinHeight(ulArr) {
			var minUl = 0;
			for (var i = 0; i < ulArr.length; i++) {
				if (ulArr[i].offsetHeight < ulArr[minUl].offsetHeight) {
					minUl = i;
				}
			}
			return minUl;
		}

		// 创建图片及其所属相关标签的函数
		function createImg() {
			// 通过随机数函数确定图片的高度
			h = random(400, 800);
			var imgObj = (function () {
				//创建一个img对象，利用该对象帮程序请求正式的图片
				var imgObject = new Image();
				//创建一个img标签，用来展示图片
				var imgTag = document.createElement('img');
				imgTag.style.width = '250px';
				imgTag.style.height = h + 'px';
				//当imgObject把图片下载完毕时，会触发该对象的load事件，在这个事件中，
				//把imgTag展示的占位图片替换为正式图片
				imgObject.onload = function () {
					imgTag.src = this.src;
				};
				return {
					src: function (src) {
						//给图片标签设置占位图
						imgTag.src = 'http://ww1.sinaimg.cn/mw1024/64eeab82gw1f9bjahlklaj203k03kmwy.jpg';
						//给图片标签设置正式图
						imgObject.src = src;
					},
					imgs: imgTag,
				};
			})();
			imgObj.src('https://unsplash.it/250/' + h + '/?random');
			var img = imgObj.imgs;
			return img;
		}

		/*工具类函数库*/
		// 随机数函数
		function random(min, max) {
			return parseInt(Math.random() * (max - min) + min);
		}
		function clientH() {
			//获取可视区高度
			return window.innerHeight || document.documentElement.clientHeight;
		}
		function scrollY() {
			//获取滚动条高度
			return document.body.scrollTop || document.documentElement.scrollTop;
		}
	</script>
</html>
